<!doctype html>
<html>
<head>
    <title>Dynamic "area" chart</title>
    <script src="../../../codebase/webix.js" type="text/javascript"></script>
    <link rel="STYLESHEET" type="text/css" href="../../../codebase/webix.css">
    <script src="../../common/chartdata.js"></script>
<body>
<div id="chartDiv" style="width:600px;height:200px;margin:20px"></div>
<script>
    webix.ui({
        id: "chart",
        view:"chart",
        container: "chartDiv",
        type:"area",
        value:"#yValue#",
        cellWidth: 50,
        dynamic: true,
        label: function(obj){
            return parseInt(obj.yValue,10);
        },
        color:"#36abee",
        alpha:0.5,
        xAxis:{
            template:"#xValue#"
        },
        yAxis:{
            start:0,
            end:100,
            step:10,
            template:function(obj){
                return (obj%50?"":obj)
            }
        },
        series:[
            {
                value:"#yValue#",
                item:{
                    borderColor: "#1293f8",
                    color: "#ffffff"
                },
                line:{
                    color:"#1293f8",
                    width:2
                },
                tooltip:{
                    template:"#yValue#"
                }
            }
        ]
    });

    var count = 1;
    $$("chart").add({xValue: count, yValue: Math.random() * 100});
    setInterval(function () {
        if(count < 100){
            count++;
            $$("chart").add({xValue: count, yValue: Math.random() * 100});
        }
    }, 1000);
</script>
</body>
</html>
